import { Tabs, Input } from 'antd';
import React, { useRef } from 'react';
import { WorksItem } from '@/pages/pc/components/Works';
import { mockData } from '@/utils/mock';
import { useState, useEffect } from 'react';
import styles from './index.less';
import VideoPlayerModal from '../../components/VideoPlayer';
import { useHistory } from 'umi';
import { allGet } from '@/services/pc';
import useRequest from '@ahooksjs/use-request';
import Empty from '../../components/Empty';
import classNames from 'classnames';
const { TabPane } = Tabs;
const { Search } = Input;
const Index: React.FC = () => {
  const { classId = 1 } = (useHistory().location as any)?.query;
  const [studentnum, setStudentnum] = useState('');
  const handlePg = (index) => {
    document.body.style.backgroundColor = '#1c3a6a';
    VideoPlayerModal.showScore({
      data: data?.data?.list?.map((item) => ({ ...item, url: item.video || item.pic })),
      defaultIndex: index,
      onClose: () => {
        document.body.style.backgroundColor = 'transparent';
        run();
      },
      onScoreSubmit: async (score, index) => {
        const item = data?.data?.list?.[index] || {};
        const response = await allGet({
          params: {
            mod: 'busywork',
            do: 'rate',
            ratesubmit: 1,
            version: 'pc1.0',
            bid: item.bid,
            score,
          },
        });
        if (response.success) {
          return true;
        }
        return false;
      },
    });
    // VideoPlayerModal.showScore({
    //   data: [
    //     {
    //       url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
    //     },
    //     { url: 'https://cgjoy.oss-cn-shanghai.aliyuncs.com/train/202106/1624348940/杨超_水弹.mp4' },

    //     {
    //       url: 'https://cgjoy.oss-cn-shanghai.aliyuncs.com/train/202106/1624349232/周岚林_菲尼爾.mp4'
    //     }
    //   ]
    // });
  };
  const handleList = (index) => {
    VideoPlayerModal.showListWithDetail({
      showDownLoadWorkFile: true,
      data: data?.data?.list?.map((item) => ({ ...item, url: item.video || item.pic })),
      defaultIndex: index,
    });
  };
  const tabKey = useRef('0');
  const onChange = (key: string) => {
    tabKey.current = key;
    run();
  };
  const onSearch = (value: string) => {
    // 搜索处理函数
    setStudentnum(value);
    run();
  };
  // 处理回车键搜索
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      onSearch(studentnum);
    }
  };

  const operations = (
    /*  <Search
      placeholder="搜索学号"
      value={studentnum}
      onChange={(e) => setStudentnum(e.target.value)}
      onSearch={onSearch}
      className={styles.xsearch}
    /> */
    <div className={classNames(styles.xsearch, 'cgjoy-search')}>
      <input
        className={styles.input}
        type="text"
        placeholder="搜索学号" // 设置占位符
        onChange={(e) => setStudentnum(e.target.value)}
        onKeyDown={handleKeyDown}
      />
      <img
        loading="lazy"
        className={styles.icon}
        src={require('@/assets/pc/images/icon-search.png')}
        onClick={() => onSearch(studentnum)}
        alt="搜索" // 添加alt属性提高可访问性
      />
    </div>
  );
  const { data, loading, run } = useRequest(
    () =>
      allGet({
        params: {
          mod: 'busywork',
          do: 'ratelist',
          perpage: 9999,
          page: 1,
          classid: classId,
          version: 'pc1.0',
          score: tabKey.current,
          studentnum: studentnum,
        },
      }),
    /* {
      refreshDeps: [studentnum],
    }, */
  );

  return (
    <div className={styles.page}>
      <Tabs
        className={styles.mytab}
        defaultActiveKey="0"
        onChange={onChange}
        tabBarExtraContent={operations}
      >
        <TabPane tab="未批改" key="0">
          <div className={styles.list}>
            {loading
              ? null
              : data?.data?.list?.map((item, index) => (
                  <div key={item.bid} className={styles.item}>
                    {' '}
                    <WorksItem
                      onClick={handlePg}
                      isLink={false}
                      itemType={3}
                      type={item.type}
                      index={index}
                      {...item}
                    />
                  </div>
                )) || <Empty />}
          </div>
        </TabPane>
        <TabPane tab="已批改" key="1">
          <div className={styles.list}>
            {loading
              ? null
              : data?.data?.list?.map((item, index) => (
                  <div key={item.bid} className={styles.item}>
                    {' '}
                    <WorksItem
                      onClick={handleList}
                      isLink={false}
                      itemType={4}
                      type={item.type}
                      index={index}
                      {...item}
                    />
                  </div>
                )) || <Empty />}
          </div>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
